<template>
	<view class="root-container root-page-top">
		<uv-navbar autoBack placeholder bgColor="transparent" :fixed="false" title="小区收益统计" />
		<view class="content">
			<view class="plan-box">
				<view class="plan-header">
					<view class="left-box">
						<view class="top-plan-box">
							<view class="month-box">
								<view class="month-box-txt">2025年03月</view>
								<tui-icon name="arrowdown" color="red" size="18"></tui-icon>
							</view>
						</view>
						<view>(次日更新当天数据)</view>
					</view>
					<view class="right-box">
						<view>下载报表</view>
						<tui-icon name="bottom" color="#fff" size="18"></tui-icon>
					</view>
				</view>

				<view class="center-box">本月总收益</view>
				<view class="plan-num">0</view>
			</view>
			<view class="list-box">
				<view class="flex-table">
				  <view class="flex-thead">
				    <view class="flex-th col-1">序号</view>
				    <view class="flex-th col-5">订单名称</view>
				    <view class="flex-th col-2">消费金额</view>
				    <view class="flex-th col-2">收益金额</view>
				  </view>
				
				  <view class="flex-tbody">
				    <view class="flex-tr">
				      <view class="flex-td col-1">122</view>
				      <view class="flex-td col-5">充值消费-话费充值:50</view>
				      <view class="flex-td col-2">17.66</view>
				      <view class="flex-td col-2">2.33</view>
				    </view>
					
					<view class="flex-tr">
					  <view class="flex-td col-1">122</view>
					  <view class="flex-td col-5">充值消费-话费充值:50</view>
					  <view class="flex-td col-2">17.66</view>
					  <view class="flex-td col-2">2.33</view>
					</view>
				   
				  </view>
				</view>
				




			</view>












		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'



	import {} from '@/api'

	const currentTab = ref(0)
	const tabs = ref(
		[
			{
			name: "福卡收益"
		}, {
			name: "商家收益"
		}, {
			name: "技师收益"
		}, {
			name: "邻工收益",

		}]
	)
	
	const listData = ref([])
	const placeholderTxt = ref('请输入小区名称')

	const change = (e) => {
		currentTab.value = e.index
	}

	const init = async () => {

	}
	init()
</script>

<style lang="scss" scoped>


	.plan-header {
		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	.plan-box {
		margin: 30upx;
		background-color: red;
		padding: 30upx;
		box-sizing: border-box;
		border-radius: 10upx;
	}

	.left-box {
		display: flex;
		color: #fff;
		font-size: 20upx;
		line-height: 40upx;
	}

	.right-box {
		display: flex;
		color: #fff;
		font-size: 20upx;
		line-height: 40upx;
	}


	.top-plan-box {
		display: flex;
		justify-content: space-between;
		align-content: center;
		margin-right: 20upx;
	}

	.month-box {
		background-color: #fff;
		color: red;
		font-size: 20upx;
		height: 40upx;
		padding: 0 20upx;
		box-sizing: border-box;
		border-radius: 30upx;
		display: flex;
		justify-content: space-between;
		align-content: center;

	}

	.month-box-txt {
		line-height: 40upx;
	}

	.center-box {
		font-size: 24upx;
		color: #fff;
		padding: 20upx 0 10upx 0;
		box-sizing: border-box;
	}

	.plan-num {
		font-size: 40upx;
		color: #fff;

		box-sizing: border-box;
	}

	.list-box {
		background-color: #fff;
		padding: 0 10upx;
		box-sizing: border-box;
	}
	
	
	.flex-table {
	  width: 100%;
	  /* border: 1px solid #eee;*/
	 /* border-radius: 8px; */
	  overflow: hidden;          
	  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	  color: #333;
	  font-size: 22upx;
	}
	
	/* 表头 */
	.flex-thead {
	  display: flex;
	  background: #ffe4ec;        /* 浅粉色背景 */
	  font-weight: 600;
	}
	.flex-th {
	  flex: 1;
	  padding: 24upx 28upx;
	  word-break: break-word;
	  display: flex;
	  justify-content: center;
	  align-content: center;
	}
	
	/* 表身 */
	.flex-tbody .flex-tr {
	  display: flex;
	  background: #fff;           /* 单元格白色背景 */
	  border-bottom: 1px solid #eee; /* 每行底边框 */
	}
	.flex-tbody .flex-tr:last-child {
	  border-bottom: none;
	}
	.flex-td {
	  flex: 1;
	  padding: 24upx 28upx;
	  display: flex;
	  justify-content: center;
	  align-content: center;
	  word-break: break-word;
	  font-size: 20upx;
	  
	}
	
	/* 可选：控制某些列的宽度比例 */
	.col-1 { flex: 1; }
	.col-2 { flex: 2; }
	.col-3 { flex: 3; }
	.col-4 { flex: 4; }
	.col-5 { flex: 5; }
	
	/* 可选：悬停行效果 */
	.flex-tbody .flex-tr:hover {
	  background: #fff7fa;
	}

</style>